<template>

	<!--骨架屏-->
	<view class="sk_tabs_box" v-if="sk_tabs_show">
		<up-row justify="space-between" gutter="10">
			<up-col span="2" v-for="item in 6" :key="item">
				<view class="sk_tabs"></view>
			</up-col>
		</up-row>
	</view>
	<!--tabs内容-->
	<up-sticky offset-top="0" bg-color="#fff" v-else>
		<up-tabs :current="current" @click='reset' :list="selectList" lineColor="#1dc700" :activeStyle="{
	        color: '#1dc700',
			fontWeight: 'bold',
	    }" :inactiveStyle="{
	        color: '#303133',
	       
	    }"></up-tabs>
	</up-sticky>
	<!--骨架屏-->
	<view class="sk_container" v-if="skeleton_loading">
		<view class="sk_list" v-for="item in 5" :key="item">
			<up-skeleton rows="3" avatarSize="120rpx" avatarShape="square" avatar></up-skeleton>
		</view>
	</view>
	<!--页面内容-->
	<view v-if="!skeleton_loading">
		<view class="list_container" v-if="list.length>0">
			<view class="orderList" v-for="(item,index) in list" :key="index">
				<view class="orderList_title" @click="goPage(item)">
					<view>订单号：{{item.orderNo}}</view>
					<view>{{item.createdAt}}</view>
				</view>
				<view class="orderList_content" @click="goPage(item)">
					<view class="orderList_content_left">
						<up-image width="120rpx" height="120rpx" :src="JSON.parse(item.serviceSnapshot).icon"
							:lazy-load="true" mode="aspectFill"></up-image>
					</view>
					<view class="orderList_content_right">
						<view class="right_title1">
							<view>{{JSON.parse(item.serviceSnapshot).serviceName}}</view>
							<view>{{JSON.parse(item.serviceSnapshot).serviceTime}}</view>
						</view>
						<view class="content_price">
							<view>￥{{item.money}}</view>
							<view>x{{item.buyCount}}</view>
						</view>
					</view>
				</view>
				<view class="orderList_down">
					<view class="orderList_down_1">
						<view>买家信息</view>
						<up-tag v-if="item.status == 0" text="待付款" plain size="mini" type="error"></up-tag>
						<view style="width: 180rpx;">
							<up-button @click="onStart(item)" v-if="item.status == 1" shape="circle" type="error" size="small" text="开始服务"></up-button>
						</view>
						<up-tag v-if="item.status == 2" text="付款失败" plain size="mini" type="warning"></up-tag>
						<up-tag v-if="item.status == 3" text="用户取消" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 4" text="退款申请中" plain size="mini" type="warning"></up-tag>
						<up-tag v-if="item.status == 5" text="已退款" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 6" text="已关闭" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 7" text="服务中" plain size="mini" type="success"></up-tag>
						<up-tag v-if="item.status == 8" type="info" text="订单完成" plain size="mini"></up-tag>
					</view>
					<view class="orderList_down_2">
						<view><up-text mode="name" size="26rpx" type="info"
								:text="JSON.parse(item.addressSnapshot).name" format="encrypt"></up-text>
						</view>

						<view class="server_box">
							<up-text prefixIcon="phone" size="26rpx" type="info" mode="phone"
								:text="JSON.parse(item.addressSnapshot).mobile" format="encrypt"></up-text>

						</view>
					</view>
					<view class="orderList_down_3">
						<up-text type="info" size="24rpx" :text="`备注：${item.remark}`"></up-text>
					</view>
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="list.length>0">
			<up-loadmore :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"
				:status="status" />
		</view>
		<view v-if="list.length==0" class="empty_box">
		</view>
		<up-modal :show="show" showCancelButton title="提示" :content='content' @confirm="confirm" @cancel="show=false"
			closeOnClickOverlay ref="uModal" :asyncClose="true"></up-modal>
		<view class="containerBottom"></view>

	</view>
</template>

<script>
	import {
		getorderListApi,
		orderStartApi
	} from '@/api/order.js'
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const state = reactive({
				selectList: [{
						name: '全部',
						value: '0,1,2,3,4,5,6,7,8,9,10',
					},
					{
						name: '待付款',
						value: 0,

					},
					{
						name: '待发货',
						value: 1,

					},
					{
						name: '使用中',
						value: 7,
					},
					{
						name: '售后',
						value: 4,
					},
					{
						name: '待评价',
						value: 8,
					},

				],
				row:'',
				content:'',
				show:false,
				current: 0,
				queryForm: {
					pageSize: 10,
					page: 1,
					status: 0,
				},
				skeleton_loading: true,
				sk_tabs_show: true,
				total: 0,
				status: 'loadmore',
				loadingText: '正在加载...',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				list: [],
				navList: [{
						name: '扫码收款',
						url: '/pages/index/compont/sm'
					},
					{
						name: '订单管理',
						url: '/pages/index/compont/mangeOrder'

					},
					{
						name: '服务管理',
						url: '/pages/index/compont/mangeFW'
					},
					{
						name: '个人信息',
						url: '/pages/index/compont/persion'
					},
					{
						name: '我的钱包'
					}
				],

			})
			onLoad((option) => {
				getData()
			})

			//下接刷新
			onPullDownRefresh(() => {
				state.queryForm.page = 1
				state.skeleton_loading = true
				state.sk_tabs_show = true
				state.list.length = 0
				getData()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			})
			//上拉加载
			onReachBottom(() => {
				let page = state.queryForm.pageSize * state.queryForm.page
				if (state.total > page) {
					state.queryForm.page++
					getData()
				} else {
					state.status = 'nomore'
				}

			})
			//重置
			const reset = (item) => {
				state.queryForm.status = item.value
				state.queryForm.page == 1
				getData()
			}
			
			const startOrder = async () => {
				try {
					await orderStartApi({
						orderNo: state.row.orderNo
					})
					setTimeout(() => {
						uni.$u.toast("服务已开始！");
						state.show = false
						getData()
					}, 1000)
			
				} catch {
					state.show = false
				}
			}
			const confirm = () => {
				startOrder()
			}
			const onStart=(row)=>{
				state.row = row
				state.show = true
				state.content = "确定要开始进行服务吗？"
				
			}
			//获取列表数据
			const getData = async () => {
				state.status = 'loading'
				if (state.queryForm.page == 1) {
					state.skeleton_loading = true
				}
				const {
					data
				} = await getorderListApi(state.queryForm)

				uni.stopPullDownRefresh()
				state.total = data.total
				if (state.total <= state.queryForm.pageSize) {
					state.status = 'nomore'
					state.list = data.records
					state.skeleton_loading = false
					state.sk_tabs_show = false
					return false
				}
				if (state.total > state.queryForm.pageSize) {
					setTimeout(() => {
						state.list = state.list.concat(data.records)
						state.skeleton_loading = false
						state.sk_tabs_show = false
						state.status = 'loadmore'
					}, 1000)
				}

			}

			const goPage = (item) => {
				uni.navigateTo({
					url: '/pages/my/serviceOrder/orderDetail?orderNo=' + item.orderNo
				})
			}
			return {
				...toRefs(state),
				goPage,
				confirm,
				onStart,
				onStart,
				reset,

			}
		}

	}
</script>


<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.list_container {
		margin-top: 1rpx;
	}

	.orderList {
		width: 100%;
		background-color: white;
		margin-top: 20rpx;

		.orderList_title {
			width: 100%;
			height: 5vh;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			view:nth-child(1) {
				margin-left: 3%;
			}

			view:nth-child(2) {
				margin-right: 3%;
				color: #999;
				font-size: 26rpx;
			}
		}

		.orderList_content {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #eaeaea;

			.orderList_content_left {
				width: 140rpx;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.orderList_content_right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.right_title1 {
					flex: 1;
					height: 100%;

					view:nth-child(2) {
						color: #999;
						font-size: 28rpx;
					}
				}

				.content_price {
					width: 180rpx;
					height: 100%;
					align-items: center;
					justify-content: center;

					view {
						text-align: right;
					}

					view:nth-child(2) {
						color: #767676;
					}
				}
			}
		}

		.orderList_down {
			width: 100%;

			.orderList_down_1 {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.orderList_down_2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-bottom: 20rpx;

				.server_box {
					display: flex;
					justify-content: space-between;
				}

				view {
					margin-left: 20rpx;
				}

			}

			.orderList_down_3 {
				width: 100%;
				height: 3vh;
				font-size: 28rpx;
				margin-left: 3%;
				color: #767676;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				text {
					color: #CBCBCB;
				}
			}
		}
	}
</style>